<template>
    <div>
     
      <div class="home " style="margin-top: 64vh;">
        <div class="content  home"   >
          <div class="title-3" >
            Key Features
          </div>
          <div class="content-box">
            <div class="content-box-left">
              <div>
                <!-- /* border: 1px solid #141414; */ -->
                <!-- background: #141414;border-radius: 8px 8px 8px 8px;padding: 20px;box-sizing: border-box; -->
                <div class="content-box-left-one">
                  <div style="text-align: center;">
                    <img class="img597" src="../assets/Image.png" alt="">
                  </div>
                  <div style="margin-top: 6vh;">
                    <img src="../assets/Div8.png" alt="" class="Div8">
                  </div>
                  <div>
                    <div class="box-title">
                      Dynamic Task Allocation
                    </div>
                    <div class="box-subheading">
                      AI-driven Task Allocation Engine that uses real-time data to tailor share difficulty to each miner’s
                      performance profile
                    </div>
                  </div>
                </div>
                <div class="content-box-right">
              <div style="margin-top: 1.4vh;">
                <img src="../assets/Divm-8.png" alt="" class="Div8">
              </div>
              <div class="box-title" >
                Network and Market Prediction
              </div>
              <div class="box-subheading" style="margin-top: 1vh;">
                Predictive Analytics Unit that employs machine <br> learning models including
                time-series neural <br> networks such as RNN,
                LSTM to forecast <br> upcoming difficulty adjustments and mempool <br>
                congestion for transaction fee optimization
              </div>
              <div style="margin-top: 10px;">
                <img class="img597 img5978" src="../assets/71.png" alt="">
              </div>
            </div>
                <div class="content-box-two">
                  <div>
                    <div class="xianshi-two">
                      <img src="../assets/8.png" alt="">
                    </div>
                    <div style="margin-top: 4vh;">
                      <img src="../assets/Divrounded-xl.png" alt=""  class="Div8">
                    </div>
                    <div class="box-title">
                      Reinforcement Learning for Optimization
                    </div>
                    <div class="box-subheading" style="width: 90%;">
                      Reinforcement Learning (RL) algorithms to continuously  optimize the mining pool’s allocation
                      policies
                    </div>
                  </div>
                  <div class="xianshi">
                    <img src="../assets/8.png" alt="">
                  </div>
  
                </div>
              </div>
            </div>
          
          </div>
          <div class="content-box-three">
            <div class="content-box-three-left">
              <div style="margin-top: 1vh;position: relative;left: -5px;">
                <img src="../assets/Group21.png" alt="">
              </div>
              <div class="box-title">
                Equitable Revenue Distribution
              </div>
              <div class="box-subheading"  style="width:95%;margin-bottom:3vh;margin-top: 3px;">
                Innovative revenue distribution model to incentivize smaller miners through a weighted reward scheme
              </div>
            </div>
            <div class="content-box-three-right">
              <img class="img597" src="../assets/Frame1116606596.png" alt="">
  
            </div>
          </div>
        
            <!--        <div class="foot-right" style="text-align: right;">-->
            <!--          <img src="../assets/1.png" alt="">-->
            <!--        </div>-->
       
        </div>
        </div>
      
      </div>
    </div>
  </template>
  <script>
  export default{
    data(){
      return{
        showDiv:false
      }
    },
    beforeRouteLeave(to, from, next) {
      this.showDiv = true;
      setTimeout(() => {
        next();
      }, 500); // 等待动画完成后继续导航
    }
  }</script>
  <style scoped>
  .Div8{
    position: relative;
    left: -9px;
  }
  .foot {
    display: flex;
    justify-content: space-between;
    position: relative;
  }
  
  .foot-left {
    display: flex;
    align-items: center;
    /* position: fixed; */
  
    position: absolute;
    bottom: -70px;
    left: -90px;
  }
  .foot-right {
    position: absolute;
    right: 0px;
  }
  
  .foot-wz {
    font-weight: 400;
    font-size: 13px;
    color: #999999;
    line-height: 16px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
    .content-box-left-one {
      background-image: url('../assets/1-1.png');
      background-size: cover;
      /* background-repeat: no-repeat;
      background-position: center; */
      box-sizing: border-box;
      padding: 20px;
    }
    .content-box-two{
      background-image: url('../assets/1-1.png');
      background-size: cover;
      background-repeat: no-repeat;
      /* background-position: center; */
      box-sizing: border-box;
      /* padding: 20px; */
    }
    .content-box-right{
      background-image:  url('../assets/1-3.png');
      background-size: cover;
      background-repeat: no-repeat;
      /* background-position: center; */
      /* box-sizing: border-box; */
    }
  
    .content-box-three{
      background-image:   url('../assets/1-2.png');
      background-size: cover;
      background-repeat: no-repeat;
      /* background-position: center; */
      /* box-sizing: border-box; */
    }
  
    .home {
      margin-top: 50vh;
      /*   background-image: url("./assets/Surface-Pro-8-21.png");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      width: 100%;
      position: absolute !important;
      top: 100px;
      height: 80%;
      left: 0; */
    }
  
    @media(max-width: 575.98px) {
     
      .title-3{
        text-align: center;
        font-weight: bold;
        font-size: 32px;
    margin-bottom: 3vh;
        background: linear-gradient(35.26439014500239deg, #FFFFFF 0%, #FFFFFF 50%, #52525B 100%);
        background-clip: text;
        -webkit-text-fill-color: transparent;
  
        line-height: 73px;
        font-style: normal;
        text-transform: none;
      }
      .xianshi-two {
      
        justify-content: center;
        display: flex;
      }
  
      .xianshi {
        display: none;
      }
  
      .img597 {
        width: 100%;
      }
  
      .content {
        width: 90%;
        margin: 0px auto;
      }
  
      .content-box {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
  
  
      }
  
      .content-box-left {
        width: 100%;
        /* position: relative; */
  
  
      }
  
      .content-box-right {
        width: 100%;
      
        /* background: #141414; */
        border-radius: 8px 8px 8px 8px;
        padding: 20px;
        margin-top: 15px;
        box-sizing: border-box;
        margin-top: 3vh;
        /* border: 1px solid #141414; */
        /* background: url(assets/1-3.png); */
      }
  
      .box-title {
        font-weight: bold;
        font-size: 18px;
        color: rgba(0, 0, 0, 0);
        line-height: 33px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        background-image: -webkit-linear-gradient(left, #FFFFFF, #FEB90B) !important;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
  
      .box-subheading {
        font-weight: 400;
        font-size: 14px;
        color: #999999;
        line-height: 20px;
        text-align: left;
        margin-top: 1.1vh;
        font-style: normal;
        text-transform: none;
      }
  
      .content-box-two {
        /* display: flex; */
        margin-top: 15px;
        /* background: #141414; */
        border-radius: 8px 8px 8px 8px;
        padding: 20px;
        box-sizing: border-box;
        margin-top: 3vh;
        /* border: 1px solid #141414; */
      }
  
      .content-box-three {
        display: flex;
        flex-wrap: wrap;
        /* background: #141414; */
        margin-top: 10px;
        border-radius: 8px 8px 8px 8px;
        padding: 20px;
        margin-top: 3vh;
        box-sizing: border-box;
        /* border: 1px solid #141414; */
      }
  
      .content-box-three-left {
        width: 100%;
      }
  
      .content-box-three-right {
        width: 100%;
      }
      .foot-left {
    display: flex;
    align-items: center;
    /* position: fixed; */
  
    position: absolute;
    bottom: -70px;
    left: -0px !important;
  }
    }
  
    @media(min-width:576px) and (max-width:767.98px) {
      .title-3{
        text-align: center;
        font-weight: bold;
        font-size: 43px;
    margin-bottom: 3vh;
        background: linear-gradient(35.26439014500239deg, #FFFFFF 0%, #FFFFFF 50%, #52525B 100%);
        background-clip: text;
        -webkit-text-fill-color: transparent;
  
        line-height: 73px;
        font-style: normal;
        text-transform: none;
      }
      .xianshi-two {
        display: none;
      }
  
      .xianshi {
        display: block;
      }
  
      .img597 {
        width: 100%;
      }
  
      .content {
        width: 90%;
        margin: 0px auto;
      }
  
      .content-box {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
  
  
      }
  
      .content-box-left {
        width: 100%;
        /* position: relative; */
  
  
      }
  
      .content-box-right {
        width: 100%;
        /* background: #141414; */
        border-radius: 8px 8px 8px 8px;
        padding: 20px;
        box-sizing: border-box;
        /* background: url(assets/1-3.png); */
        /* border: 1px solid #141414; */
      }
  
      .box-title {
        font-weight: bold;
        font-size: 18px;
        color: rgba(0, 0, 0, 0);
        line-height: 43px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        background-image: -webkit-linear-gradient(left, #FFFFFF, #FEB90B) !important;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
  
      .box-subheading {
        font-weight: 400;
        font-size: 18px ;
        color: #999999;
        line-height: 18px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
  
      .content-box-two {
        display: flex;
        margin-top: 15px;
        margin-top: 2vh;
        /* background: #141414; */
        border-radius: 8px 8px 8px 8px;
        padding: 20px;
        box-sizing: border-box;
        /* border: 1px solid #141414; */
      }
  
      .content-box-three {
        display: flex;
        /* background: #141414; */
        margin-top: 10px;
        border-radius: 8px 8px 8px 8px;
        padding: 20px;
        box-sizing: border-box;
        /* border: 1px solid #141414; */
      }
  
      .content-box-three-left {
        width: 100%;
      }
  
      .content-box-three-right {
        width: 100%;
      }
    }
  
    @media(min-width:767px) {
      .title-3{
        text-align: center;
        font-weight: bold;
        font-size: 53px;
    margin-bottom: 3vh;
        background: linear-gradient(35.26439014500239deg, #FFFFFF 0%, #FFFFFF 50%, #52525B 100%);
        background-clip: text;
        -webkit-text-fill-color: transparent;
  
        line-height: 73px;
        font-style: normal;
        text-transform: none;
      }
      .xianshi-two {
        display: none;
      }
  
      .xianshi {
        display: block;
      }
  
      .img5978 {
        width: 100%;
      }
  
      .content {
        width: 90%;
        margin: 0px auto;
      }
  
      .content-box {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
  
  
      }
  
      .content-box-left {
        width: 100%;
        /* position: relative; */
  
  
      }
  
      .content-box-right {
        width: 100%;
        /* background: #141414; */
        border-radius: 8px 8px 8px 8px;
        padding: 20px;
        margin-top: 15px;
        box-sizing: border-box;
        /* background: url(assets/1-3.png); */
        /* border: 1px solid #141414; */
      }
  
      .box-title {
        font-weight: bold;
        font-size: 18px;
        color: rgba(0, 0, 0, 0);
        line-height: 43px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        background-image: -webkit-linear-gradient(left, #FFFFFF, #FEB90B) !important;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
  
      .box-subheading {
        font-weight: 400;
        font-size: 14px;
        color: #999999;
        line-height: 18px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
  
      .content-box-two {
        display: flex;
        margin-top: 30px;
        /* background: #141414; */
        border-radius: 8px 8px 8px 8px;
        padding: 20px;
        box-sizing: border-box;
        /* border: 1px solid #141414; */
      }
  
      .content-box-three {
        display: flex;
        /* background: #141414; */
        margin-top: 10px;
        border-radius: 8px 8px 8px 8px;
        padding: 20px;
        box-sizing: border-box;
        /* border: 1px solid #141414; */
      }
  
      .content-box-three-left {
        width: 100%;
      }
  
      .content-box-three-right {
        width: 100%;
      }
    }
  
    @media(min-width:1200px) {
  
    .title-3{
      display: none;
  
    }
      .xianshi-two {
        display: none;
      }
  
      .xianshi {
        display: block;
      }
  
      /*    .img597 {
        width: 100%;
      } */
      .content {
        width: 80%;
        margin: 0px auto;
      }
  
      .content-box {
        display: flex;
        justify-content: space-between;
  
  
      }
  
      .content-box-left {
        width: 59%;
        /* background-image: url(assets/1-1.png); */
        /* position: relative; */
  
  
      }
  
      .content-box-right {
        width: 39%;
        /* background: #141414; */
        /*  background: url(assets/1-3.png) 100% 100% no-repeat; */
  
        border-radius: 8px 8px 8px 8px;
        padding: 20px;
        margin-top: 0px;
        box-sizing: border-box;
        /* border: 1px solid #141414; */
      }
  
      .box-title {
        font-weight: bold;
        font-size: 18px;
        color: rgba(0, 0, 0, 0);
        line-height: 43px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        background-image: -webkit-linear-gradient(left, #FFFFFF, #FEB90B) !important;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
  
      .box-subheading {
        font-weight: 400;
        font-size: 14px;
        color: #999999;
        line-height: 18px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
  
      .content-box-two {
        display: flex;
        margin-top: 30px;
        /* background: #141414; */
        border-radius: 8px 8px 8px 8px;
        padding: 20px;
        box-sizing: border-box;
        /* border: 1px solid #141414; */
      }
  
      .content-box-three {
        display: flex;
        /* background: #141414; */
        margin-top: 10px;
        border-radius: 8px 8px 8px 8px;
        padding: 20px;
        box-sizing: border-box;
        /* border: 1px solid #141414; */
      }
  
      .content-box-three-left {
        width: 65%;
      }
  
      .content-box-three-right {
        width: 25%;
      }
    }
  
    @media(min-width:1900px) {
      .title-3{
        display: none;
      
      }
   /*   .img597 {
        width: 100%;
      } */
  
      .xianshi-two {
        display: none;
      }
  
      .xianshi {
        display: block;
      }
  
      .xianshi-two {
        display: none;
      }
  
      .xianshi {
        display: block;
      }
  
      /*    .img597 {
            width: 100%;
          } */
      .content {
        width:73%;
        margin: 0px auto;
      }
  
      .content-box {
        display: flex;
        justify-content: space-between;
  
  
      }
  
      .content-box-left {
        width: 60.4%;
        /* position: relative; */
  
  
      }
  
      .content-box-right {
        width: 39%;
        /* background: #141414; */
        /* background: url(assets/1-3.png) 100% 100% no-repeat; */
        background-size: cover;
        border-radius: 8px 8px 8px 8px;
        padding: 20px;
        margin-top: 0px;
        box-sizing: border-box;
        /* border: 1px solid #141414; */
      }
  
      .box-title {
        font-weight: bold;
        font-size: 20px;
        color: rgba(0, 0, 0, 0);
        line-height: 43px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        background-image: -webkit-linear-gradient(left, #FFFFFF, #FEB90B) !important;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
  
      .box-subheading {
        font-weight: 400;
        font-size: 17px;
        color: #999999;
        line-height: 27px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
  
      .content-box-two {
        display: flex;
        margin-top: 1.1vh;
        /* background: #141414; */
        border-radius: 8px 8px 8px 8px;
        padding: 20px;
        box-sizing: border-box;
        /* border: 1px solid #141414; */
      }
  
      .content-box-three {
        display: flex;
        /* background: #141414; */
        margin-top: 1.1vh;
        border-radius: 8px 8px 8px 8px;
        padding: 20px;
        box-sizing: border-box;
        /* border: 1px solid #141414; */
      }
  
      .content-box-three-left {
        width: 65%;
      }
  
      .content-box-three-right {
        /* width: 36%; */
        position: absolute;
        right: 6vh;
      }
      .img5978{
        width: 86%;
      }
    }
  </style>
  